<script setup lang="ts">
import { storeToRefs } from "pinia";
import { computed, onMounted, ref } from "vue";
import VipList from "./widget/vip-list.vue";
import Panel from "./widget/pannel.vue";
import { useUserInfo } from "@/store/user";
import debounce from "@/utils/debounce";
import { AIToken, Token } from "@/utils/cache";
import { phoneSplit } from "@/utils";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);
const kefu = ref();
const handleOpen = () => {
  kefu.value.open();
};
const handleClose = () => {
  kefu.value.close();
};

const userStore = useUserInfo();
const { userInfo } = storeToRefs(userStore);

const toLoginPage = debounce(() => {
  if (!Token.get() && !AIToken.get()) {
    uni.showModal({
      title: "温馨提示",
      content: "您还未登录，是否前往登录",
      success(res) {
        if (res.confirm) {
          uni.redirectTo({ url: `/pages/login/login` });
        }
      }
    });
  } else {
    uni.navigateTo({ url: `/pages/editor/editor` });
  }
});

onMounted(() => {
  if (Token.get() && AIToken.get()) {
    userStore.getUserInfo();
  }
});

const saveHeight = computed(() => {
  const res = uni.getSystemInfoSync();
  return res.statusBarHeight! + 44 + "px";
});

const formatVip = (type: string) => {
  if (!type) {
    return "";
  }
  if (type === "year_vip_user") {
    return "年VIP";
  }
  if (type === "month_vip_user") {
    return "月VIP";
  }
  return "周VIP";
};
</script>

<template>
  <view class="mine">
    <view class="user-info" :style="{ paddingTop: saveHeight }">
      <view class="top">
        <view class="left">我的</view>
        <uv-image
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/mine-kefu.svg"
          mode="aspectFill"
          :fade="false"
          width="24"
          height="24"
          @click="handleOpen"
        ></uv-image>
      </view>
      <view class="user-header">
        <view :class="['header', userInfo.vipuser?.user_level]">
          <Flex
            class="content"
            justify="flex-start"
            @click="toLoginPage"
            :customStyle="{ padding: '0 40rpx' }"
          >
            <uv-avatar
              :src="userInfo.profile_photo"
              mode="aspectFill"
              default-url="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/avatar.png"
              size="50"
              customStyle="margin-right: 24rpx;"
            />

            <view class="mid">
              <Flex justify="flex-start">
                <view class="name">
                  {{ phoneSplit(userInfo.user_name) || "请登录" }}
                </view>
                <image
                  v-if="userStore.isVip"
                  src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_arrow.svg"
                  class="arrow"
                ></image>
                <image
                  v-else
                  src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/ic_AngleRight1.png"
                  class="arrow"
                ></image>
              </Flex>
              <view class="desc" v-if="userStore.isVip">
                <uv-image
                  v-if="userInfo.vipuser.user_level === 'week_vip_user'"
                  src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/week-crown.svg"
                  mode="aspectFit"
                  :fade="false"
                  width="16"
                  height="16"
                ></uv-image>
                <uv-image
                  v-if="userInfo.vipuser.user_level === 'month_vip_user'"
                  src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/month-crown.svg"
                  mode="aspectFit"
                  :fade="false"
                  width="16"
                  height="16"
                ></uv-image>
                <uv-image
                  v-if="userInfo.vipuser.user_level === 'year_vip_user'"
                  src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/year-crown.svg"
                  mode="aspectFit"
                  :fade="false"
                  width="16"
                  height="16"
                ></uv-image>

                <text class="desc-m">{{
                  formatVip(userInfo.vipuser.user_level)
                }}</text>
                <text v-if="userInfo.vipuser.vip_expire_at" class="desc-r">{{
                  "剩余" +
                  dayjs(userInfo.vipuser.vip_expire_at).diff(dayjs(), "day") +
                  "天"
                }}</text>
              </view>
              <uv-text
                v-if="!userStore.isVip && Token.get()"
                size="12"
                color="#DDDDDD"
                text="点亮会员标志，享受尊贵特权"
              ></uv-text>
            </view>
            <view class="right">
              <view v-if="userStore.isVip">
                <uv-text size="12" color="#666666" text="我的收益"></uv-text>
                <uv-text
                  size="16"
                  color="#080E12"
                  :text="
                    userInfo.commission_total
                      ? '￥' + userInfo.commission_total
                      : '￥0.00'
                  "
                ></uv-text>
              </view>
              <view v-else>
                <uv-text size="12" color="#DDDDDD" text="我的收益"></uv-text>
                <uv-text
                  size="16"
                  color="#ffffff"
                  :text="
                    userInfo.commission_total
                      ? '￥' + userInfo.commission_total
                      : '￥0.00'
                  "
                ></uv-text>
              </view>
            </view>
          </Flex>
        </view>
      </view>
    </view>
    <view class="main">
      <Panel />
      <view class="lists">
        <VipList :params="userInfo" />
      </view>
      <view class="beian">
        <image
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/mine-logo.png"
          class="beian-logo"
        />
        <!-- <view>Yunshan.AI 中文 ©2024 R&D Team</view>
        <view>粤ICP备19040188号-1</view> -->
      </view>
    </view>
  </view>

  <uv-popup ref="kefu" mode="center" bgColor="none">
    <view class="kefu-container">
      <uv-image
        src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/kefu-line.svg"
        mode="aspectFit"
        :fade="false"
        width="142"
        height="24"
        customStyle="margin: 20px auto;"
      ></uv-image>
      <view class="kefu-code">
        <uv-image
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/qrcode_rgkf.png"
          mode="aspectFit"
          :fade="false"
          width="160"
          height="160"
          customStyle="margin: 20px auto;"
        ></uv-image>
        <view class="btn"> 长按识别二维码添加客服 </view>
      </view>
    </view>
    <view class="icon_close" @click.stop="handleClose"></view>
  </uv-popup>
</template>

<style lang="scss" scoped>
.desc-m {
  font-size: 24rpx;
  color: #080e12;
}

.desc-r {
  font-size: 24rpx;
  color: #666666;
  margin-left: 10rpx;
  display: block;
}

.user-info {
  background: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/mine-bg.svg")
    no-repeat center;
  background-size: cover;
  padding: 0 16px;

  .top {
    display: flex;
    justify-content: space-between;
    height: 44px;
    // margin-bottom: 10px;
    color: #333;
    font-weight: bold;

    .left {
      background: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/mine-top-bg.svg")
        no-repeat center;
      background-size: contain;
    }
  }

  .user-header {
    .header {
      background-size: 100% auto;
      background-repeat: no-repeat;
      padding: 25px 0;
      background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/normal-bg.png");

      .content {
        .mid {
          flex: 2;

          .desc {
            display: flex;
            justify-content: flex-start;

            &-m {
              padding-left: 10px;
            }

            &-r {
              flex: 3;
            }
          }

          .right {
            margin-left: 30px;
          }
        }

        .name {
          color: #fff;
        }
      }

      &.year_vip_user {
        .name {
          color: #080e12;
        }

        background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/year-bg.png");
      }

      &.month_vip_user {
        .name {
          color: #080e12;
        }

        background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/month-bg.png");
      }

      &.week_vip_user {
        .name {
          color: #080e12;
        }

        background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/week-bg.png");
      }
    }
  }

  .arrow {
    width: 13px;
    height: 13px;
    margin-left: 5px;
  }
}

.beian {
  margin-top: 20px;
  text-align: center;
  color: #999999;
  font-size: 12px;
  .beian-logo {
    margin: 0 auto;
    width: 250rpx;
    height: 84rpx;
  }
}

.name {
  // color: #5f462b;
  font-size: 16px;
  max-width: 120px;
  font-weight: 600;
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}

.avatar {
  // width: 64px;
  // height: 64px;
  // border-radius: 50%;
  margin-right: 12px;
}

.main {
  background-color: #f9f9f9;
  // background-color: black;
  border-radius: 10px 10px 0 0;
  margin-top: -16px;
  padding: 20px;

  .lists {
    background-color: #fff;
    border-radius: 15px;
  }
}

.icon_close {
  width: 40px;
  height: 40px;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_close.png");
  background-size: cover;
  margin: 10px auto 0;
}

.kefu-container {
  width: 290px;
  height: 334px;
  background-color: #495bff;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;

  .kefu-code {
    width: 270px;
    height: 260px;
    margin: 20px 10px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 20px;

    .code {
      margin: 20px auto;
    }

    .btn {
      width: 230px;
      height: 40px;
      line-height: 40px;
      border-radius: 10px;
      margin: 0 20px;
      background-color: #333;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
